<template>
  <div class="payMessage">
    <div class="left">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="缴费人员" prop="username"><br />
          <el-input style="width: 300px; margin-left: -70px" v-model="form.username" placeholder="输入缴费人员"></el-input>
        </el-form-item>

        <el-form-item label="缴费名称" prop="payname"><br />
          <el-input style="width: 300px; margin-left: -70px" v-model="form.payname" placeholder="输入缴费项目"></el-input>
        </el-form-item>

        <el-form-item label="支付类型:" prop="costtype"><br />
          <el-select v-model="str" style="width: 300px; margin-left: -70px" clearable placeholder="请选择支付类型">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="支付状态:" prop="coststatus"><br />
          <el-select v-model="str2" style="width: 300px; margin-left: -70px" clearable placeholder="请选择支付状态">
            <el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="支付时间"><br />
          <el-date-picker style="width: 300px; margin-left: -70px" v-model="form.startDate" type="daterange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="缴费金额" prop="paymoney"><br />
          <el-input style="width: 300px; margin-left: -70px" v-model="form.paymoney" placeholder="缴费金额"></el-input>
        </el-form-item>

        <el-form-item label="缴费优先级" prop="paylevel"><br />
          <el-input style="width: 300px; margin-left: -70px" v-model="form.paylevel" placeholder="缴费优先级"></el-input>
        </el-form-item>
        <el-button @click="resetForm" style="width:120px;margin-left:30px">重置</el-button>
        <el-button @click="handleClick" style="width:120px" type="primary">立刻查询</el-button>
      </el-form>
    </div>
    <div class="right">
      <div class="r-head">
        <h1>缴费列表</h1>
        <el-button icon="el-icon-upload2" type="primary" @click="handleDaochu">导出</el-button>
      </div>
      <p>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="payname" label="缴费产品" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.payname == null">暂无</span>
              <span v-else>{{ scope.row.payname }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="username" label="缴费人员" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.username == null">暂无</span>
              <span v-else>{{ scope.row.username }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="costtype" label="支付类型">
            <template slot-scope="scope">
              <span v-if="scope.row.costtype == null">暂无</span>
              <span v-else>{{ scope.row.costtype }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="paymoney" label="缴费金额">
            <template slot-scope="scope">
              <span v-if="scope.row.paymoney == null">暂无</span>
              <span v-else>{{ scope.row.paymoney }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="paylevel" label="缴费优先级">
            <template slot-scope="scope">
              <span v-if="scope.row.paylevel == null">暂无</span>
              <span v-else>{{ scope.row.paylevel }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="paytime" label="支付时间">
            <template slot-scope="scope">
              <span v-if="scope.row.paytime">{{ scope.row.paytime.substring(0, 10) }}{{
                scope.row.paytime.substring(13,16) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="paystatus" label="支付状态">
            <template slot-scope="scope">
              <span v-if="scope.row.paystatus == 1">已支付</span>
              <span v-else>未支付</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="210">
            <template slot-scope="scope">
              <el-button @click="handleView(scope.row)" type="primary" plain mini>查看</el-button>
              <el-button type="info" plain mini>导出</el-button>
              <el-button @click="handleDel(scope.row)" type="danger" plain mini>删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <el-pagination style="margin:20px 0 0 380px" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 50, 100, 200]"
          :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="this.obj.total">
        </el-pagination>
      </p>
    </div>
  </div>
</template>
<script>
// 导入插件
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      str: "",
      str2: "",
      currentPage4: 1,
      form: {
        username: "",
        payname: "",
        costtype: "",
        coststatus: "",
        startDate: "",
        endDate: "",
        paymoney: "",
        paylevel: "",
      },
      options: [
        {
          value: 1,
          label: "支付宝支付",
        },
        {
          value: 2,
          label: "微信支付",
        },
        {
          value: 3,
          label: "银联支付",
        },
      ],
      options2: [
        {
          value: 1,
          label: "已支付",
        },
        {
          value: 2,
          label: "未支付",
        },
      ],
      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        // 默认选中哪一页
        currentPage: 1,
        // 定义总条数
        total: null,

      },
      tableData: []
    };
  },
  methods: {
    handleDaochu() {
      // 创建一个workbook
      const workbook = XLSX.utils.book_new();
      // 导出数据
      const worksheet = XLSX.utils.json_to_sheet(this.tableData);
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet 1");

      // 将workbook转为二进制数据
      const excelData = XLSX.write(workbook, {
        type: "array",
        bookType: "xlsx",
      });
      // 创建blob对象并保存excel文件
      const blob = new Blob([excelData], { type: "application/octet-stream" });
      // 设置导出文件名字
      saveAs(blob, "data.xlsx");
    },
  //列表信息/查询
  handleClick() {
    this.$Axios({
      url: "/cost/getPayMessage",
      method: "get",
      data: {
        username: this.form.username,
        payname: this.form.payname,
        costtype: this.form.costtype,
        coststatus: this.form.coststatus,
        startDate: this.form.startDate,
        endDate: this.form.endDate,
        paymoney: this.form.paymoney,
        paylevel: this.form.paylevel,
        currPage: this.obj.page - 1,
        pageNum: this.obj.rows,
      },
      success: (result) => {
        setTimeout(() => {
          this.obj.total = result.total;
          this.tableData = result.data;
        }, 200);
      },
    });
  },
  //重置
  resetForm() {
    // 清空验证并清空内容
    this.$refs["form"].resetFields();

    this.str = null;
    this.str2 = null;
  },
  //删除
  handleDel(row) {
    this.$confirm("确定删除该支付信息?", "提示", {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    })
      .then(() => {
        this.$Axios({
          url: "/cost/delCostData",
          method: "get",
          data: {
            id: row.id,
          },
          success: (result) => {
            setTimeout(() => {
              this.$message({
                message: "删除该支付信息成功",
                type: "success",
              });
              this.handleClick();
            }, 200);
          },
        });
      })
      .catch((action) => {
        this.$message({
          type: "info",
          message: action === "cancel" ? "已取消删除该支付信息" : "停留在当前页面",
        });
      });
  },
  //查看
  handleView(row) {
    this.$router.push({
      path: "/pay/payDetail",
      query: {
        detailId: row.id

      },
    });
  },
  //分页
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
    this.obj.rows = val;
    this.handleClick();
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    this.obj.page = val;
    this.handleClick();
  },
},
mounted(){
  this.handleClick()
}
};
</script>
<style lang="scss" scoped>
.payMessage::v-deep {
  display: flex;
  justify-content: space-between;

  .has-gutter {
    tr {
      th {
        background: #eef1f6;
        text-align: center;
        color: #000;
        font-size: 14px;
        border-right-color: #ddd;
      }
    }
  }

  .el-table__row {
    td {
      text-align: center;
    }
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .left {
    overflow-y: auto;
    height: 550px;
    padding: 30px 10px 30px 20px;
    // width: 400px;
  }

  .right {
    width: 1050px;
    padding: 20px;

    .r-head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
    }
  }
}
</style>